<template>
    <div class="advance-wrapper main">
        <nav-bar>
            <template v-slot:back>
                <back-button/>
            </template>
            <template v-slot:title>
                <h1 class="base-font-color">高级查询</h1>
            </template>
            <template v-slot:right>
                <button class="base-button" @click="focus">我的关注</button>
            </template>
        </nav-bar>
        <div class="base-content" @scroll="contentScroll">
            <!--            <advance-row label="干部类别">-->
            <!--                <el-checkbox-group v-model="query.CadresCategory" >-->
            <!--                    <el-checkbox label="1">省管干部</el-checkbox>-->
            <!--                    <el-checkbox label="2">市管干部</el-checkbox>-->
            <!--                </el-checkbox-group>-->
            <!--            </advance-row>-->
            <!--            <advance-row label="姓名">-->
            <!--                <el-input class="input-normal" v-model="query.PersonName"/>-->
            <!--            </advance-row>-->
            <advance-row label="性别">
                <el-select v-model="query.Sex">
                    <el-option value="0" label="全部"/>
                    <el-option value="1" label="男"/>
                    <el-option value="2" label="女"/>
                </el-select>
            </advance-row>
            <advance-row label="民族">
                <el-select v-model="query.EthnicE">
                    <el-option value="0" label="全部"/>
                    <el-option value="1" label="汉族"/>
                    <el-option value="2" label="少数民族"/>
                </el-select>
            </advance-row>
            <advance-row label="籍贯">
                <el-input class="input-normal" v-model="query.NativePlace"/>
            </advance-row>
            <advance-row label="政治面貌">
                <el-select v-model="query.PoliticsStatus">
                    <el-option value="0" label="全部"/>
                    <el-option value="1" label="中共党员"/>
                    <el-option value="2" label="非中共党员"/>
                </el-select>
            </advance-row>
            <advance-row label="个人身份">
                <el-checkbox-group v-model="query.PersonType">
                    <el-checkbox label="1">公务员</el-checkbox>
                    <el-checkbox label="2">参公管理</el-checkbox>
                    <el-checkbox label="3">事业单位职员</el-checkbox>
                </el-checkbox-group>
            </advance-row>
            <advance-row label="家庭成员">
                <el-input class="input-normal" v-model="query.FamilayMember"/>
            </advance-row>
            <advance-row label="年龄段">
                <div class="slider-wrapper">
                    <el-slider
                            v-model="ageRange"
                            :min="20"
                            :max="65"
                            :marks="ageMarks"
                            :show-tooltip="showTip"
                            @input="showTip = true"
                            range>
                    </el-slider>
                </div>
            </advance-row>
<!--            <advance-row label="履历信息">-->
<!--                <el-input class="input-normal" v-model="query.ResumeInfo"/>-->
<!--            </advance-row>-->
            <advance-row label="职务">
                <el-checkbox-group v-model="query.JobLevel">
                    <el-checkbox label="1">正处</el-checkbox>
                    <el-checkbox label="2">副处</el-checkbox>
                    <el-checkbox label="3">正科</el-checkbox>
                    <el-checkbox label="4">副科</el-checkbox>
                </el-checkbox-group>
            </advance-row>
<!--            <advance-row label="现任职务年限">-->
<!--                大于-->
<!--                <el-input class="input-item" v-model="query.beginJobLevelYears"/>-->
<!--                年-小于-->
<!--                <el-input class="input-item" v-model="query.endJobLevelYears"/>-->
<!--                年-->
<!--            </advance-row>-->
            <advance-row label="学历">
                <el-select v-model="query.EducationState" style="margin-right: 20px; width: 100px;">
                    <el-option value="0" label="全部"/>
                    <el-option value="1" label="在职"/>
                    <el-option value="2" label="全日制"/>
                </el-select>
                <el-checkbox-group v-model="query.Education">
                    <el-checkbox label="1">研究生</el-checkbox>
                    <el-checkbox label="2">大学</el-checkbox>
                    <el-checkbox label="3">大专</el-checkbox>
                    <el-checkbox label="4">中专</el-checkbox>
                </el-checkbox-group>
            </advance-row>
            <advance-row label="参加工作年限">
                <div class="slider-wrapper">
                    <el-slider
                            v-model="workRange"
                            :min="1"
                            :max="50"
                            :marks="workMarks"
                            :show-tooltip="showTip"
                            @input="showTip = true"
                            range>
                    </el-slider>
                </div>
            </advance-row>
            <!--            <advance-row label="健康">-->
            <!--                <el-input class="input-normal" v-model="query.HealthCondition"/>-->
            <!--            </advance-row>-->
            <!--            <advance-row label="专业技术职务">-->
            <!--                <el-input class="input-normal" v-model="query.SkillTitle"/>-->
            <!--            </advance-row>-->
            <advance-row label="奖惩情况">
                <el-input v-model="query.RewardsAndPunishment"/>
            </advance-row>
            <div class="options">
                <button class="base-button" @click="queryEvent">查询</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {navbarMixin} from "../../mixins";
    import AdvanceRow from "./child-comp/AdvanceRow";


    export default {
        name: "Advance",
        mixins: [navbarMixin],
        components: {
            AdvanceRow
        },
        activated() {
            for (let i = 20; i < 66; i++) {
                if (i % 5 === 0) {
                    this.$set(this.ageMarks, i, `${i}`);
                }
            }
            for (let i = 1; i < 51; i++) {
                if (i % 5 === 0) {
                    this.$set(this.workMarks, i, `${i}`);
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            if (to.name !== 'SearchResult') {
                this.query = {
                    // CadresCategory: [],         	// 干部类别 1.省管干部 2.市管干部
                    // PersonName: '',             // 姓名
                    Sex: '0',                    	// 性别		0.全部 1.男 2.女
                    EthnicE: '0',                	// 民族		0.全部 1.汉族 2.少数民族
                    NativePlace: '',        // 籍贯
                    PoliticsStatus: '0',         	// 政治面貌	0.全部 1.中共党员 2.非中共党员
                    PersonType: [],             	// 个人身份	1.公务员 2.参公管理 3.事业单位职员
                    FamilayMember: '',          // 家庭成员
                    beginAgeRange: '',              // 年龄段
                    endAgeRange: '',              // 年龄段
                    // ResumeInfo: '',         // 履历信息
                    JobLevel: [],               	// 职级		1.正处级 2.副处级 3.正科级 4.副科级
                    // beginJobLevelYears: '',          // 现任职级年限
                    // endJobLevelYears: '',          // 现任职级年限
                    EducationState: '0',               // 0.全部 1.在职 2.非在职
                    Education: [],              	// 学历 	1.研究生 2.大学 3.大专 4.中专
                    beginStartingWorkYears: '',      // 参加工作年限
                    endStartingWorkYears: '',      // 参加工作年限
                    // HealthCondition: '',        // 健康状况
                    // SkillTitle: '',     // 专业技术职务
                    RewardsAndPunishment: ''    // 奖惩情况
                }
                this.ageRange = [20, 65],
                this.ageMarks = {};
                this.workRange= [0, 50];
                this.workMarks= {};
                this.showTip= true;
            }
            next();
        },
        data() {
            return {
                query: {
                    // CadresCategory: [],         	// 干部类别 1.省管干部 2.市管干部
                    // PersonName: '',             // 姓名
                    Sex: '0',                    	// 性别		0.全部 1.男 2.女
                    EthnicE: '0',                	// 民族		0.全部 1.汉族 2.少数民族
                    NativePlace: '',        // 籍贯
                    PoliticsStatus: '0',         	// 政治面貌	0.全部 1.中共党员 2.非中共党员
                    PersonType: [],             	// 个人身份	1.公务员 2.参公管理 3.事业单位职员
                    FamilayMember: '',          // 家庭成员
                    beginAgeRange: '',              // 年龄段
                    endAgeRange: '',              // 年龄段
                    // ResumeInfo: '',         // 履历信息
                    JobLevel: [],               	// 职级		1.正处级 2.副处级 3.正科级 4.副科级
                    // beginJobLevelYears: '',          // 现任职级年限
                    // endJobLevelYears: '',          // 现任职级年限
                    EducationState: '0',               // 0.全部 1.在职 2.非在职
                    Education: [],              	// 学历 	1.研究生 2.大学 3.大专 4.中专
                    beginStartingWorkYears: '',      // 参加工作年限
                    endStartingWorkYears: '',      // 参加工作年限
                    // HealthCondition: '',        // 健康状况
                    // SkillTitle: '',     // 专业技术职务
                    RewardsAndPunishment: ''    // 奖惩情况
                },
                ageRange: [20, 65],
                ageMarks: {},
                workRange: [0, 50],
                workMarks: {},
                showTip: true
            }
        },
        created() {
        },
        methods: {
            focus() {
                this.$router.push({path: '/searchResult', query: {page: 1}});
            },
            queryEvent() {
                let query = {...this.query};
                query.beginAgeRange = this.ageRange[0];
                query.endAgeRange = this.ageRange[1];

                query.beginStartingWorkYears = this.workRange[0];
                query.endStartingWorkYears = this.workRange[1];
                query.PersonType = this.query.PersonType.join(',');
                query.JobLevel = this.query.JobLevel.join(',');
                query.Education = this.query.Education.join(',');

                console.log(JSON.stringify(query));

                this.$store.commit('setAdvanceQuery', query);

                this.$router.push({path: '/searchResult', query: {page: 2}});
            },
            // position: absolute; top: 463px; left: 917px; transform-origin: center bottom; z-index: 2078;
            contentScroll() {
                this.showTip = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../assets/scss/define";

    .advance-wrapper {
        .slider-wrapper {
            width: 100%;
            height: 100%;
            padding: 0 5px;
        }

        .input-normal {
            width: 217px;
        }

        .input-item {
            width: 150px;
        }

        .options {
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f2f2f2;

            button {
                width: 100px;
            }
        }
    }
</style>
